<template>
  <div class="report-form-content">
    <van-tabs :active="active">
      <van-tab title="基础信息">
        <div class="update-log">
          <div class="report-form-list-content">
            <div class="shenpilist">
              <label>二上编制编码</label>
              <span>{{ obj.code }}</span>
            </div>
            <div class="shenpilist">
              <label>二上编制名称</label>
              <span>{{ obj.name }}</span>
            </div>
            <div class="shenpilist">
              <label>存续状态</label>
              <span>{{ showDictLabel('BudgetProjectViability', obj.viability) }}</span>
            </div>
            <div class="shenpilist">
              <label>项目起始年度</label>
              <span>{{ obj.startTime }}</span>
            </div>
            <div class="shenpilist">
              <label>项目终止年度</label>
              <span>{{ obj.endTime }}</span>
            </div>
            <div class="shenpilist">
              <label>项目来源</label>
              <span>{{ showDictLabel('BudgetProjectSource', obj.source) }}</span>
            </div>
            <div class="shenpilist">
              <label>申报属性</label>
              <span>{{ showDictLabel('BudgetProjectAttribute', obj.attribute) }}</span>
            </div>
            <div class="shenpilist">
              <label>申请财政金额</label>
              <span>￥{{ obj.totalFund }}</span>
            </div>
            <div class="shenpilist">
              <label>社会投入资金</label>
              <span>￥{{ obj.putinFund }}</span>
            </div>
            <div class="shenpilist">
              <label>当年资金</label>
              <span>￥{{ obj.currFund }}</span>
            </div>
            <div class="shenpilist">
              <label>用款单位</label>
              <span>{{ showIdLabel(governmentList, obj.useGovId, 'governmentName') }}</span>
            </div>
            <div class="shenpilist">
              <label>申报单位</label>
              <span>{{ showIdLabel(governmentList, obj.applyGovId, 'governmentName') }}</span>
            </div>
            <div class="shenpilist">
              <label>上一年项目预算安排情况</label>
              <span>{{ obj.previousArrange }}</span>
            </div>
            <div class="shenpilist">
              <label>主管部门</label>
              <span>{{ showIdLabel(budgetCompetentList, obj.managerOrgId, 'name') }}</span>
            </div>
            <div class="shenpilist">
              <label>主管部门联系人</label>
              <span>{{ showIdLabel(budgetCompetentList, obj.managerOrgId, 'contact') }}</span>
            </div>
            <div class="shenpilist">
              <label>主管部门联系电话</label>
              <span>{{ showIdLabel(budgetCompetentList, obj.managerOrgId, 'telephone') }}</span>
            </div>
            <div class="shenpilist">
              <label>是否债券可用项目</label>
              <span>{{ showEnumLabel('CommonYesNo', obj.isDebenture) }}</span>
            </div>
            <div class="shenpilist">
              <label>是否科研项目</label>
              <span>{{ showEnumLabel('CommonYesNo', obj.isScientific) }}</span>
            </div>
          </div>
          <div class="shenpilist shenpilist-1">
            <label>项目概述</label>
            <!-- <span>{{ obj.summarize }}</span> -->
          </div>
          <div class="shenpilist shenpilist-1">
            <!-- <label>项目概述</label> -->
            <span>{{ obj.summarize }}</span>
          </div>
          <div class="shenpilist shenpilist-1">
            <label>设立依据及申报理由</label>
            <!-- <span>{{ obj.reason }}</span> -->
          </div>
          <div class="shenpilist shenpilist-1">
            <!-- <label>设立依据及申报理由</label> -->
            <span>{{ obj.reason }}</span>
          </div>
          <div class="report-form-list-content">
            <div class="shenpilist">
              <label>项目总额</label>
              <span>{{ obj.system }}</span>
            </div>
            <div class="shenpilist">
              <label>是否基建项目</label>
              <span>{{ showEnumLabel('CommonYesNo', obj.isConstruction) }}</span>
            </div>
          </div>
        </div>
        <div class="" style="display: flex;align-items: center;" v-if="obj.isConstruction === '1'">
          <h4>基建类项目信息</h4>
        </div>
        <div class="update-log" v-if="obj.isConstruction === '1'">
          <div class="report-form-list-content">
            <div class="shenpilist">
              <label>基建立项情况</label>
              <span style="width: 240px;">{{ showDictLabel('BudgetProjectConstruction', obj.constructionDesc) }}</span>
            </div>
            <div class="shenpilist">
              <label>是否代建项目</label>
              <span>{{ showEnumLabel('CommonYesNo', obj.isAgent) }}</span>
            </div>
          </div>
          <div class="shenpilist shenpilist-1" v-if="obj.isAgent === '1'">
            <label>代建单位</label>
            <span>{{ showIdLabel(governmentList, obj.agentGovId, 'governmentName') }}</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="政府采购">
        <div class="update-log" v-if="obj.isGovernmentPurchase">
          <div class="report-form-list-content" v-for="(item,index) in purchases" :key="index">
            <label class="form-label">政府采购{{ index + 1 }}</label>
            <div class="update-log">
              <div class="report-form-list-content">
                <div class="shenpilist">
                  <label>采购项目</label>
                  <span>{{ item.purchaseItem }}</span>
                </div>
                <div class="shenpilist">
                  <label>采购品目</label>
                  <span>{{ item.purchaseKind }}</span>
                </div>
                <div class="shenpilist">
                  <label>采购需求概况</label>
                  <span>{{ item.purchaseRequire }}</span>
                </div>
                <div class="shenpilist">
                  <label>预计采购时间</label>
                  <span>{{ item.purchaseDate }}</span>
                </div>
              </div>
              <div class="report-form-list-content">
                <div class="shenpilist">
                  <label>资金性质</label>
                  <span>{{ item.purchaseAttr }}</span>
                </div>
                <div class="shenpilist">
                  <label>采购金额</label>
                  <span>￥{{ item.purchaseFund }}</span>
                </div>
                <div class="shenpilist">
                  <label>单价</label>
                  <span>￥{{ item.purchasePrice }}</span>
                </div>
                <div class="shenpilist">
                  <label>采购数量</label>
                  <span>{{ item.purchaseNum }}</span>
                </div>
                <div class="shenpilist">
                  <label>计量单位</label>
                  <span>{{ item.purchaseUnit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="update-log" v-else>
          <div class="report-form-list-content">
            <div style="text-align: center;width: 100%;">无政府采购</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="分年度资金计划">
        <div class="" style="display: flex;align-items: center;">
          <h4>项目资金构成（单位: 元）</h4>
        </div>
        <div class="report-form-list-content" v-for="(item,index) in items" :key="index">
          <label class="form-label">项目资金构成{{ index + 1 }}</label>
          <div class="update-log">
            <div class="report-form-list-content">
              <div class="shenpilist">
                <label>年度</label>
                <span>{{ item.year }}</span>
              </div>
              <div class="shenpilist">
                <label>明细项目类别</label>
                <span>{{ showIdLabel(itemTypeList, item.itemType, 'itemTypeName') }}</span>
              </div>
              <div class="shenpilist">
                <label>开支范围</label>
                <span>{{showIdLabel(itemRangeAllList, item.itemRange, 'itemRangeName') }}</span>
              </div>
              <div class="shenpilist">
                <label>开支内容</label>
                <span>{{ item.itemName }}</span>
              </div>
              <div class="shenpilist">
                <label>计量单位</label>
                <span>{{ item.unit }}</span>
              </div>
              <div class="shenpilist">
                <label>单价/支出标准</label>
                <span>￥{{ item.price }}</span>
              </div>
              <div class="shenpilist">
                <label>工作量</label>
                <span>{{ item.num }}</span>
              </div>
              <div class="shenpilist">
                <label>测算依据及说明</label>
                <span>{{ item.reason }}</span>
              </div>
              <div class="shenpilist">
                <label>按标准测算金额</label>
                <span>￥{{ item.price * item.num }}</span>
              </div>
            </div>
            <div class="shenpilist shenpilist-1">
              <label>备注</label>
              <span>{{ item.remark }}</span>
            </div>
          </div>
        </div>
        <div class="" style="display: flex;align-items: center;">
          <h4>分年度资金计划</h4>
        </div>
        <div class="update-log">
          <div v-for="(item,index) in years" :key="index">
            <label class="form-label">{{item.year}}年度</label>
            <div class="report-form-list-content">
              <div class="shenpilist">
                <label>单位申报数</label>
                <span>{{ item.applyFund }}</span>
              </div>
              <div class="shenpilist">
                <label>三保目录</label>
                <span>{{ showIdLabel(thirdCatalogList, item.thirdCatalog, 'thirdName') }}</span>
              </div>
              <div class="shenpilist">
                <label>热点分类</label>
                <span>{{ showIdLabel(hotCatalogList, item.hotCatalog, 'hotName') }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="项目绩效信息">
        <div class="" style="display: flex;align-items: center;">
          <h4>绩效目标</h4>
        </div>
        <div class="update-log">
          <div class="shenpilist shenpilist-1">
            <label>总体绩效目标</label>
            <!-- <span>{{ obj.targetAll }}</span> -->
          </div>
          <div class="shenpilist shenpilist-1">
            <!-- <label>总体绩效目标</label> -->
            <span>{{ obj.targetAll }}</span>
          </div>
          <div class="shenpilist shenpilist-1">
            <label>年度绩效目标</label>
            <!-- <span>{{ obj.targetCurrent }}</span> -->
          </div>
          <div class="shenpilist shenpilist-1">
            <!-- <label>年度绩效目标</label> -->
            <span>{{ obj.targetCurrent }}</span>
          </div>
        </div>
        <div class="add-indexs">
          <h4>总体绩效指标</h4>
        </div>
        <div class="report-table">
          <div class="report-form-list-content">
            <div class="shenpilist-1">
                <el-table
                    :data="KpisAll"
                    row-key="id"
                    class="indexsTabel"
                    border
                    default-expand-all>
                    <el-table-column prop="kpiName"  width="180px" label="指标名称" />
                    <el-table-column prop="kpiName"  width="180px" label="指标名称" />
                    <el-table-column prop="kpiContent" width="180px" label="指标解释" />
                    <el-table-column prop="kpiValue"  width="180px" label="指标值" />
                    <el-table-column prop="remark"  width="180px" label="备注" />
                </el-table>
            </div>
          </div>
        </div>
        <div class="add-indexs">
          <h4>本年度绩效指标</h4>
        </div>
        <div class="report-table">
          <div class="report-form-list-content">
            <div class="shenpilist-1">
              <el-table
                  :data="KpisCurrent"
                  row-key="id"
                  class="indexsTabel"
                  border
                  default-expand-all>
                  <el-table-column prop="kpiName" width="180px" label="指标名称" />
                  <el-table-column prop="kpiName" width="180px" label="指标名称" />
                  <el-table-column prop="kpiContent" width="180px" label="指标解释" />
                  <el-table-column prop="kpiValuePeriod" width="180px" label="指标周期值" />
                  <el-table-column prop="kpiValue" width="180px" label="年度指标值" />
                  <el-table-column prop="remark" width="180px" label="备注" />
              </el-table>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="附件信息">
        <ul class="files-list" v-if="fileList.length > 0">
          <li v-for="item in fileList" :key="item.id">
            <div class="files-list-1">
              <!-- <van-icon class-prefix="iconfont icon-tupian" size="30" /> -->
              <div class="files-list-content">
                <p><span class="list-content-hindline">附件名称：{{ item.attachmentName }}</span> {{ bytesToSize(item.size) }}</p>
                <p><span class="">附件类型：</span> {{ (showDictLabel('BudgetProjectFileType', item.fileType)) }}</p>
                <p><span>上传于 {{ item.createTime }}</span></p>
              </div>
            </div>
          </li>
        </ul>
        <van-empty description="暂无附件" v-else />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet, doGetDownload} from "@/config/http";
import {svc, showIdLabel, getListPageSize, showDictLabel, showEnumLabel} from "@/config/common";
import attachmentPreview from '@/views/components/base/attachmentPreview.vue'
import initListStore from '@/store/modules/initList'

const props = defineProps({
  budgetTwoId: {
    required: true,
    type: String,
  }
})

const emit = defineEmits(['close', 'projectListSelect'])

// tab 切换
let active = ref(0)
// 基本数据
let obj = ref({})
// 项目预算明细
let items = ref([])
// 分年度资金计划
let years = ref([])
// 本年度指标
let KpisCurrent = ref([])
// 总指标
let KpisAll = ref([])
// 政府采购
let purchases = ref([])
// 附件
let fileList = ref([])

// 三保目录
let thirdCatalogList = initListStore().thirdCatalogList
// 热点分类
let hotCatalogList = initListStore().hotCatalogList
// 单位列表
let governmentList = initListStore().governmentList
// 主管部门
let organizationList = initListStore().organizationList
let budgetCompetentList = initListStore().budgetCompetentList
// 项目类别
const itemTypeList = initListStore().itemTypeList
// 开支范围
const itemRangeAllList = initListStore().itemRangeAllList

let attachmentVisible = ref(false)
let previewAttachmentId = ref(null)

watch(() => props.budgetTwoId, async val => {
  await initObj(val)
  // await initList()
},{immediate:true})

// 获取数据
async function initObj(id) {
  obj.value = []
  items.value = []
  years.value = []
  KpisCurrent.value = []
  KpisAll.value = []
  purchases.value = []
  fileList.value = []
  let p1 = doGet(svc, '/budget-two/' + id, {}, true)
  let p2 = doGet(svc, '/budget-two-item/listByField', {field: 'budgetTwoId', values: id}, false)
  let p3 = doGet(svc, '/budget-two-year/listByField', {field: 'budgetTwoId', values: id}, false)
  let p4 = doGet(svc, '/budget-two-kpi/listByField', {field: 'budgetTwoId', values: id, sortField: 'weight',sortType: 'asc'}, false)
  let p5 = doGet(svc, '/budget-two-purchase/listByField', {field: 'budgetTwoId', values: id}, false)
  let p6 = doGet(svc, '/budget-two-file/listByField', {field: 'budgetTwoId', values: id}, false)
  let resArray = await Promise.all([p1, p2, p3, p4, p5, p6])
  obj.value = resArray[0]
  items.value = resArray[1]
  years.value = resArray[2]
  let kpisArr = resArray[3]
  let kpis  = kpisCompose(kpisArr)
  KpisCurrent.value = kpis.filter(item => item.performanceType === '1')
  KpisAll.value = kpis.filter(item => item.performanceType === '0')
  purchases.value = resArray[4]
  fileList.value = resArray[5]
  obj.value.totalFund = 0
  items.value.map(item => {
    obj.value.totalFund += parseFloat(item.price) * parseFloat(item.num)
  })
}

// 获取下拉框数据列表
// async function initList() {
//   let p1 = doGet(svc, '/budget-third-catalog/page', {pageSize: getListPageSize()}, false)
//   let p2 = doGet(svc, '/budget-hot-catalog/page', {pageSize: getListPageSize()}, false)
//   let p3 = doGet(svc, '/government/page', {pageSize: getListPageSize()}, false)
//   let p4 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
//   let p5 = doGet(svc, '/budget-item-type/page', {pageSize: getListPageSize()}, false)
//   let p6 = doGet(svc, '/budget-item-range/page', {pageSize: getListPageSize()}, false)
//   let p7 = doGet(svc, '/budget-competent/page', {pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([p1, p2, p3, p4, p5, p6, p7])
//   // 三保目录
//   thirdCatalogList.value = resArray[0]['records']
//   // 热点分类
//   hotCatalogList.value = resArray[1]['records']
//   // 单位列表
//   governmentList.value = resArray[2]['records']
//   // 主管部门
//   organizationList.value = resArray[3]['records']
//   itemTypeList.value = resArray[4]['records']
//   itemRangeAllList.value = resArray[5]['records']
//   budgetCompetentList.value = resArray[6]['records']
// }

// 组装指标树结构
function kpisCompose(list, pid) {
  return list
  .filter((item) =>
    !pid ? item.parentId === null : item.parentId === pid
  )
  .map(item => {
    item.children = kpisCompose(list, item.id);
    return item;
  });
}
// 下载
function downloadBtn(row) {
  doGetDownload(svc, '/customAttachment/download/' + row.attachmentId, {})
}
// 预览
function prviewdBtn(row) {
  attachmentVisible.value = true
  setTimeout(() => {
    previewAttachmentId.value = row.attachmentId
  },100)
}
function closeBtn() {
  attachmentVisible.value = false
}
</script>

<style scoped lang="scss">
.report-form-content {
  width: 100%;
  height: 52vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.report-form-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-list-btn {
  display: flex;
  /* display: flex; */
  align-items: center;
  justify-content: space-between
}
.report-form-list-content .el-form-item__label {
  width: 220px !important;
}
.el-form-item__label {
  width: 220px !important;
}
.report-form-list-content {
  display: flex;
  flex-wrap: wrap;
}

.form-label {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 0 0 auto;
  /* font-size: var(--el-form-label-font-size); */
  font-size: 16px;
  /* color: var(--el-text-color-regular); */
  color: #337ecc;
  height: 32px;
  line-height: 32px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  font-weight: bold;
  padding-left: 1.125rem;
}
.update-log {
  width: 1014px;
  margin-top: 0;
  margin-bottom: 30px;
}
h4 {
  padding-left: 1.125rem;
}
.select-list {
  width: 100%;
  margin: 30px 0;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.select-list .el-radio-group {
  margin-right: 30px;
}
.select-list .el-button {
  margin-left: 30px;
}
.add-indexs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upload-demo {
  margin-right: 20px;
}
.file-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.file-list-btns {
  display: flex;
  align-items: center;
}
.file-list-btn-span {
  color: #F56C6C;
  font-size: 12px;
}
/* .shenpilist {
  width: 33%;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 5px 0;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}
.shenpilist label {
  width: 140px;
  text-align: right;
}
.shenpilist span {
  padding-left: 15px;
  display: inline-block;
  width: 100%;
}
.shenpilist-1 {
  width: 100%;
  align-items:flex-start
}
.shenpilist-1 label {
  width: 175px !important;
}
.shenpilist-1 span {
  padding-left: 15px;
  display: inline-block;
  width: 1000px;
} */
.demo-tabs {
  width: 1024px !important;
}
.shenpilist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--van-cell-background);
  box-sizing: border-box;
  width: 100%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  // line-height: var(--van-cell-line-height);
  border-bottom: 1px solid var(--van-border-color);;
  & label {
    color: var(--van-field-label-color);
    // text-align: left;
    word-wrap: break-word;
    font-weight: 700;
  }
  & span {
    display: block;
    box-sizing: border-box;
    // width: 100%;
    color: var(--van-field-input-text-color);
    line-height: inherit;
    // text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
    -webkit-user-select: auto;
    user-select: auto;
  }
}
.shenpilist-head {
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  font-weight: 700;
  padding: .3125rem 0;
  padding-left: 1.125rem;
  color: #337ecc;
}
.files-list {
  // padding: 0 .9375rem;
  li {
    width: 100%;
    color: var(--van-gray-6);
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    .files-list-1 {   
      .files-list-content {
        // margin-left: 1.25rem;
        width: 95%;
        & p {
          padding-left: .9375rem;
          padding-top: .625rem;
          margin: 0;
          display: flex;
          align-items: center;
        }
        .list-content-hindline {
          font-size: 1.125rem;
          padding-right: .9375rem;
          font-weight: bold;
          color: #000;
        }
      }
    }
  }
  
}
.update-log {
  width: 100%;
}
.report-table {
  overflow-x: scroll;
}
</style>
